<template>
	<el-card shadow="never" class="assetStatus-contenBox" style="border-width: 0px !important;padding: 0px !important;">
		<el-header style="height: 35px;margin-top: -3px;margin-left: 10px;width: 100%;padding-right: 0px;">
			<div class="left-panel">
				<div class="statustitleTopImg"></div>
				<span class="todotitle">资产状态统计</span>
			</div>
			<div class="right-panel" >
				<div  class="assetStatus-threeBox">
					<div :class="statusclass2" @click.stop="changeoption(1)"><span>净值</span></div>
				<div :class="statusclass1" @click.stop="changeoption(0)"><span>数量</span></div>
				
				</div>
			</div>
		</el-header>
		
			<div style="width: 100%;margin-top: 10px;">
				<scEcharts :height="height" :option="option"  @clicks="chartsClick"></scEcharts>
			</div>
	</el-card>
</template>

<script>
	import scEcharts from '@/components/scEcharts';
	import ExSelect from "@/components/exSelect/index.vue";
	import tool from "@/utils/tool";
	import globalparam from "@/constant/model/globalparam";
	import moment from "moment/moment";

	/**
	 * 引入组件 @/components/scEcharts
	 * 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
	 * 支持props包括 height，width，option
	 * 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
	 */

	export default {
		name: 'chart',
		components: {
			scEcharts
		},
		props: {
			height: { type: String, default: "160px" },
		},
		data() {
			return {
				option: {
					color: [
					'#409EFF',
					'#6EEEFD',
					'#F2C55A',
					'#F8AC5B',
					'#32CFB0',
					'#A76BFA',

				],
					tooltip: {
						trigger: 'item',
						formatter: function(params) {
							return `${params.seriesName}<br/>${params.marker}${params.data.name}: ${params.percent}%`;
						},
						// formatter: '{b}: {c} ({d}%)',
						textStyle: {
							fontFamily: 'PingFangSC-Regular', // 设置字体类型
							fontSize: 12, // 设置字体大小
							//fontWeight: 'bold', // 设置字体粗细
						}
					},
					legend: {
						//top: '20%',
						//orient: 'left',
						left: 'right',
						orient: '',
						x: 'right', // 可设定图例在左、右、居中
						y: 'center', // 可设定图例在上、下、居中 top center bottom
						left: 'right',

						textStyle: {
							fontFamily: 'PingFangSC-Regular', // 设置字体类型
							fontSize: 12, // 设置字体大小
							color:'#666666'
							//fontWeight: 'bold', // 设置字体粗细
						},
					},
					series: [
						{
							name: '资产状态统计',
							type: 'pie',
							radius: ['40%', '70%'],
							//radius: ['60%', '30%'],
      						center: ['27%', '40%'],
							top: '11%',
							data: [],
							labelLine: {
								show: false
							},
							label: {
								show: false
							},
							itemStyle: {							
							borderColor: '#fff',
							borderWidth: 2
							},
							emphasis: {
								itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							},
						}
					]
				},
				searchForm:[],
				manageDeptIds:tool.current.manageDeptIds(),
				manageAssetCategoryIds:tool.current.manageAssetCategoryIds(),
				assetStatisticsRange: '',
				assetStatisticsStatusRange: [],
				currkey:"数量",
				statusclass1:"statusselected",
				statusclass2:"statusselect"
			}
		},
		beforeMount() {
			this.$cache.data.loadGlobalParam(globalparam.assetStatisticsRange.paramCode).then((res) => {
				this.assetStatisticsRange = res;
				this.$cache.data.loadGlobalParam(globalparam.assetStatisticsStatusRange.paramCode).then((res) => {
					this.assetStatisticsStatusRange = res;
					this.loadData();
				});
			});
		},
		created(){
			window.addEventListener('resize', this.loadData);
		},
		methods: {
			
			loadData(){
			
				var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
				if(isFull){
				if(window.innerWidth<1500){
					this.option.series[0].radius=['30%', '40%'];
					this.option.series[0].center=['27%', '40%'];
				}else
				if(window.innerWidth<1700){
					this.option.series[0].radius=['30%', '50%'];
					this.option.series[0].center=['30%', '40%'];
				}
				else {
					this.option.series[0].radius=['30%', '50%'];
					this.option.series[0].center=['30%', '40%'];
				}
			}else{
				if(window.innerWidth<1500){
					this.option.series[0].radius=['40%', '70%'];
					this.option.series.center=['27%', '40%'];
					
				}else
				if(window.innerWidth<1700){
					this.option.series[0].radius=['40%', '70%'];
					this.option.series[0].center=['27%', '40%'];
					
				}else {
					this.option.series[0].adius= ['40%', '70%'];
					this.option.series[0].center=['27%', '40%'];
				}
			}
			this.option.series[0].data=[];
				let queryParams = {};
				this.loading = true;
				this.fomateQueryParams(queryParams,this);
				queryParams.boughtDateEnd = moment(new Date()).format("YYYYMMDD");
				queryParams.echartsType = this.currkey;
				this.$API.asset.asset.assetStateStatistics.post(queryParams).then((rsp =>{
					if(rsp.code === 2000){
						let resdata=rsp.data;
						let resarray=[];
						resdata.forEach((item,index)=>{
							if(item.name!="删除"){
								item.name=item.name+"  "+item.value;
								resarray.push(item);
							}
						});
						this.option.series[0].data = resarray;
					}
					this.loading = false;
				}));
			},
			fomateQueryParams(queryParams,_this) {
				queryParams.assetStatisticsRange = _this.assetStatisticsRange;
				queryParams.deptIds = _this.manageDeptIds;
				queryParams.assetStatusIds = _this.assetStatisticsStatusRange;
				queryParams.assetCategoryIds = _this.manageAssetCategoryIds;
			},
			chartsClick(params){
				let queryParams = {};
				this.fomateQueryParams(queryParams,this);
				queryParams.boughtDateEnd = moment(new Date()).format("YYYYMMDD");
				queryParams.assetStatusId = params.data.assetStatusId;
				this.searchAsset(params.name.split("  ")[0],queryParams);
			},
			searchAsset(item,queryParams) {
				let title = "首页资产状态统计"+item+"资产状态明细";
				//跳转到搜索台账页面
				let fromRouteId = this.$TOOL.crypto.MD5(this.$route.path);//当前页面的路由地址
				let key = this.$TOOL.crypto.MD5(title);//可以做为key的关键字段或内容
				/**
				 *  1 = 根据管理部门，根据登录账户管理范围，资产的管理部门在账户管理范围内的显示<br>
				 *  2 = 根据使用部门，根据登录账户管理范围，资产的使用部门在账户管理范围内的显示<br>
				 *  3 = 根据管理部门或使用部门，根据登录账户管理范围，资产的使用部门或管理部门在账户管理范围内的显示<br>
				 *  其它 = 根据管理部门，按台账，根据使用部门或管理部门或借用部门在管理范围内的
				 */
					//设置搜索参数
				let routeParams = {
						id: key,
						title: title,
						showXuli: true,
						fixedParams:{
							assetStatisticsRange:queryParams.assetStatisticsRange,
							deptIds:queryParams.deptIds,
						},//固定搜索参数，打开页面后，用户通过搜索界面的清空按钮无法清除
						searchParams: queryParams
					};
				this.$store.dispatch("addRouteParams", routeParams);
				this.$router.push({
					name: "toAssetList",
					params: {fromRouteId: fromRouteId, key: key}
				});
			},
			changeoption(val){

				if(val==0){
					this.currkey="数量";
					this.statusclass1="statusselected";
					this.statusclass2="statusselect";
				}else if(val==1){
					this.currkey="金额";
					this.statusclass1="statusselect";
					this.statusclass2="statusselected";
				}
				this.loadData();
			}
		}
	}
</script>

<style scoped lang="scss">
.assetStatus-threeBox{
		height: 40px;
		align-items: center ;z-index: 500;
		height: 32px;float: right;
		padding-right: 38px;
	}


.xia-app-title{
		color: #141e31;
		font-size: 16px;
		font-weight: 700;
		line-height: 32px;
		top:20px;
		margin-left: 10px;
		margin-top: 30px;
	}
	.symain .el-card__body {
		padding-bottom: 0px !important;
	}

	.syselect{
		line-height: 26px;
		height: 26px;
	}
	.syselect div,.syselect input{
		line-height: 26px;
		height: 26px;
	}

	.no-Clear  .el-input__wrapper:hover .el-input__suffix{
		display: none !important;

	}

	.statustitleTopImg{
		width: 20px;
  height: 20px;
  background: url(../../../../../public/img/statustitleTop.png)
    100% no-repeat;
  background-size: 100% 100%;
  float: left;
	}
	.todotitle{
		width: 117px;
  height: 18px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFangSC-Semibold;
  text-align: left;
  white-space: nowrap;
  margin-top: 0px;
  margin-left: 5px;
  font-weight: 500;
	}
	.statusselected{
		
  border-radius: 2px;
  height: 20px;
  width: 30px;
  margin-left: 5px;
  margin-top: 5px;
  cursor: pointer;
  float: right;
	}
	.statusselected span{
		width: 20px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(0, 56, 216, 1);
  font-size: 15px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin-left: 8px;
	}

	.statusselect{
		
  border-radius: 2px;
  height: 20px;
  width: 30px;
  margin-left: 5px;
  margin-top: 5px;
  cursor: pointer;
  float: right;
	}

	.statusselect span{
		width: 20px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 13px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin-left: 8px;
	}
</style>
